<!--<header class="mui-bar mui-bar-nav">-->
<!--    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
<!--    <h1 class="mui-title">{{title}}</h1>-->
<!--</header>-->
<div class="mui-content mui-scroll-wrapper" id="image_list">
    <div>
        <ul class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(v,k) in data_list">
                <a :href="v.url">
                    <img class="mui-media-object" :src="'<?php echo Yii::app()->baseUrl?>'+v.thumb_src"
                    style="height: 168px;height: 240px">
                    <div class="mui-media-body">{{v.name}}</div></a>
            </li>
        </ul>
    </div>
</div>
<nav class="mui-bar mui-bar-tab">
    <?php foreach ($parent_floder as $floder):?>
    <a href="javascript:;" id="<?php echo $floder->id?>" class="mui-tab-item">
        <?php echo $floder->name?></a>
    <?php endforeach;?>
</nav>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            data_list:[],
            pid:<?php echo $default_fid?>,
            page:1,  //当前页码
            total_page:0,//总页数
            // title:'',
        },
        methods:{
            pullRefresh:function () {
                var _that = this;
                mui.showLoading("正在加载..","div");  //显示加载进度框
                mui.ajax('<?php echo $this->createUrl('wfloder/list')?>',{
                    data:{
                        pid:_that.pid,
                        page:_that.page,
                        type:'<?php echo $type?>'
                    },
                    type:'post',
                    async:true,
                    success:function (ret) {
                        mui.hideLoading();//隐藏加载进度框
                        if (ret.code != 0) {
                            mui.alert(ret.message,'出错了');
                            return;
                        }
                        _that.data_list = _that.data_list.concat(ret.data);
                        _that.total_page = ret.total_page;
                        // _that.title = ret.title;
                        mui('#image_list').pullRefresh().endPullupToRefresh(_that.page >= _that.total_page);
                        _that.page++;
                    }
                });
            }
        }
    });

    //切换相册
    mui('.mui-bar').on('click','.mui-tab-item',function(){
        mui('.mui-popover').popover('hide');   //隐藏子菜单
        mui('#image_list').pullRefresh().refresh(true);  //重置下拉控件
        app.pid = this.getAttribute('id');  //相册id;
        app.page = 1;  //从第一页开始
        app.data_list = [];   //之前其他相册数据清空
        app.pullRefresh();  //获取图片数据
    });
    mui.init({
        pullRefresh: {
            container: "#image_list",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                height: '50px',//可选,默认50px.下拉刷新控件的高度,
                range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                auto: true,//可选,默认false.首次加载自动上拉刷新一次
                contentnomore:'没有更多数据了',
                callback: function () {
                    app.pullRefresh();
                }
            }
        }
    });
    mui('#image_list').on('tap','a',function(){
        window.top.location.href = this.href;
    });
    (function($){
        $(".mui-scroll-wrapper").scroll({
            bounce: false,//滚动条是否有弹力默认是true
            indicators: true, //是否显示滚动条,默认是true
        });
    })(mui);
</script>
